<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明德后台管理系统</title>
</head>
<style>
    @import url(//fonts.googleapis.com/css?family=Lato:300:400);

    body {
        margin: 0;
    }

    h1 {
        font-family: 'Lato', sans-serif;
        /* font-weight: 300; */
        letter-spacing: 2px;
        font-size: 40px;
    }

    p {
        font-family: 'Lato', sans-serif;
        letter-spacing: 1px;
        font-size: 14px;
        color: #333333;
    }

    .header {
        position: relative;
        text-align: center;
        background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
        color: white;
    }

    .logo {
        width: 50px;
        fill: white;
        padding-right: 15px;
        display: inline-block;
        vertical-align: middle;
    }

    .inner-header {
        height: 65vh;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .flex {
        /*Flexbox for containers*/
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .waves {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-bottom: -7px;
        /*Fix for safari gap*/
        min-height: 100px;
        max-height: 150px;
    }

    .content {
        position: relative;
        height: 20vh;
        text-align: center;
        background-color: white;
    }

    /* Animation */

    .parallax>use {
        animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    }

    .parallax>use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax>use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax>use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    /*Shrinking for mobile*/
    @media (max-width: 768px) {
        .waves {
            height: 40px;
            min-height: 40px;
        }

        .content {
            height: 30vh;
        }

        h1 {
            font-size: 24px;
        }
    }
    .box{
        /* background-color: #f1f3f4; */
        color: skyblue;
        width: 400px;
        margin: auto;
        margin-top: 100px;
        line-height: 50px;
        text-align: center;
        border:gray;
        border-radius: 10px;
        border-color: gray;
        /* box-shadow:10px 10px 20px 10px #767676; */
    }
    #loginBtn{
        border: 1px solid #398dee;
        width: 60%;
        height:38px;
        background-color: #398dee;
        border-radius: 20px;
    }
    #zc{
        text-decoration: none;
        color: #398dee;
    }
</style>

<body>
    <!--Hey! This is the original version
of Simple CSS Waves-->

    <div class="header">

        <!--Content before waves-->
        <div class="inner-header flex">
            <!--Just the logo.. Don't mind this-->
            <svg version="1.1" class="logo" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve">
                <path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" />
                <g>
                    <path fill="#fff"
                        d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4
    C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1
    c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7		c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2	c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z" />
                </g>
            </svg>
            <h1><div class="box">
                <h1>明德软件学院</h1>
                <p>
                    帐号： <input type="text" name="username" id="username">
                </p>
                <p>
                    密码： <input type="password" name="password" id="password">
                </p>
                <p>
                    <button id="loginBtn">登录</button><br>
                    还没有帐号?去<a href="/register" id="zc">注册</a> 
                </p>
        
                <div id="message">
        
                </div>
            </div></h1>
        </div>

        <!--Waves Container-->
        <div>
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave"
                        d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                </g>
            </svg>
        </div>
        <!--Waves end-->

    </div>
    <!--Header ends-->

    <!--Content starts-->
    <div class="content flex">
        <p>MingDe_ | 2021 | Join us</p>
    </div>
    <!--Content ends-->
</body>
<script>
    let userEle = document.getElementById('username');
    let pwdEle = document.getElementById('password');
    let loginBtnEle = document.getElementById('loginBtn');
    let msgEle = document.getElementById('message');

    //1. 绑定单击事件
    loginBtnEle.onclick = function () {
        // 单击事件做的事情
        //2. 获取用户名和密码
        let username = userEle.value;
        let password = pwdEle.value;
        //3. 基本信息基本校验
        //1. 用户名最少6位，不能包含特殊字符
        let usernameReg = /^[a-zA-Z0-9]{6,}$/;
        if (!usernameReg.test(username)) {
            msgEle.innerHTML = '<span class="error">用户名最少6位，不能包含特殊字符</span>'
            return false;
        }

        //2. 密码不能少于8位
        let pwdReg = /^.{6,}$/;
        if (!pwdReg.test(password)) {
            msgEle.innerHTML = '<span class="error">密码不能少于8位</span>'
            return false;
        }

        msgEle.innerHTML = '';
        // 防止用户频繁按钮，对服务器造成一定的压力
        loginBtnEle.setAttribute('disabled', 'disabled')
        loginBtnEle.innerText = "登录中.."
        //4. 校验成功发送ajax请求，到服务器进行验证匹配
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                console.log(this.responseText)
                let data = JSON.parse(this.responseText)
                loginBtnEle.removeAttribute('disabled')
                loginBtnEle.innerText = "登录"
                let { code, message } = data;
                if (code == '20000') {
                    alert('登录成功')
                    location.href = "/";
                } else {
                    alert('用户名或密码失败')
                }
            }
        }
        xhr.open('post', '/ajaxlogin', true)
        // post要设置请求头content-type,模拟post表单来传递数据
        xhr.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
        username = encodeURIComponent(username);
        password = encodeURIComponent(password);
        let formdata = `username=${username}&password=${password}`;
        xhr.send(formdata)
    }

</script>
</html>